<style lang="less" scoped>
  .doctor-surgery{
    width: 100%;
    height: 100%;
    &_title{
      height: 40px;
      background: url('~@/images/contenttitle.png');
      background-repeat: no-repeat;
      background-position: bottom;
      text-align: center;
      color: #00F6FF;
      line-height: 40px;
      margin-bottom: 5px;
    }
    &_content{
      height: calc(100% - 45px);
    }
  }
</style>

<template>
  <div class="doctor-surgery">
    <div class="doctor-surgery_title">
      <span>科室医生手术治疗占比</span>
    </div>
    <div id="doctorSurgery" class="doctor-surgery_content" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getDeptDoctorPCIRatio, getStrokeDoctorSurgeryRatio } from '@/api/comprehensive/doctorSurgery'
export default {
  props: {
    isStrock: {
      type: String,
      default: 'chestPain'
    }
  },
  data() {
    return {
      setInter: null
    }
  },
  watch: {
    'isStrock'() {
      this.init()
    }
  },
  mounted() {
    this.init()
    this.setInter = setInterval(() => {
      this.init()
    }, 5000)
  },
  destroyed() {
    clearInterval(this.setInter)
  },
  methods: {
    init() {
      let myChart = echarts.init(document.getElementById('doctorSurgery'))
      // myChart.clear()
      myChart.hideLoading()
      // myChart.showLoading({
      //   text: '',
      //   fontSize: 18,
      //   left: 'center',
      //   color: 'transparent', // loading颜色，设置成透明或白色，不然会显示loading状态
      //   textColor: '#fff', // 文字颜色
      //   maskColor: 'rgba(255, 255, 255, 0)' // 背景色
      // })
      window.addEventListener('resize', myChart.resize)
      if (this.isStrock == 'chestPain') {
        getDeptDoctorPCIRatio({
          hospitalId: this.$store.getters.hospitalId
        }).then(res => {
          if (res.code == 0) {
            if (res.data && res.data.length > 0) {
              let pieData = []
              res.data.forEach(el => {
                pieData.push({
                  name: el.name,
                  value: el.pciratio
                })
              })
              let option = {
                color: ['#36CACA', '#3A9FFF', '#F9D435', '#F0657A', '#9660E1', '#5A76A5'],
                // tooltip: {
                //   trigger: 'item'
                // },
                legend: {
                  type: 'scroll',
                  orient: 'vertical',
                  textStyle: {
                    color: '#fff'
                  },
                  top: '5%',
                  right: '10%',
                  formatter: function(name) {
                    let legendName = pieData.filter(item => {
                      return item.name == name
                    })
                    return legendName[0].name + ' ' + legendName[0].value + '%'
                  }
                },
                series: [
                  {
                    name: '科室医生手术占比',
                    type: 'pie',
                    center: ['30%', '50%'],
                    radius: ['60%', '80%'],
                    label: {
                      show: false,
                      position: 'center'
                    },
                    emphasis: {
                      label: {
                        show: true,
                        fontSize: '20',
                        fontWeight: 'bold',
                        formatter: '{b}：{c}'
                      }
                    },
                    labelLine: {
                      show: false
                    },
                    data: pieData
                  }
                ]
              }
              myChart.setOption(option)
            } else {
              myChart.showLoading({
                text: '暂无数据',
                fontSize: 18,
                left: 'center',
                color: 'transparent', // loading颜色，设置成透明或白色，不然会显示loading状态
                textColor: '#fff', // 文字颜色
                maskColor: 'rgba(255, 255, 255, 0)' // 背景色
              })
            }
          }
        })
      } else if (this.isStrock == 'stroke') {
        getStrokeDoctorSurgeryRatio({
          hospitalId: this.$store.getters.hospitalId
        }).then(res => {
          if (res.code == 0) {
            if (res.data && res.data.length > 0) {
              let pieData = []
              res.data.forEach(el => {
                pieData.push({
                  name: el.doctorName,
                  value: el.surgeryRatio
                })
              })
              let option = {
                color: ['#36CACA', '#3A9FFF', '#F9D435', '#F0657A', '#9660E1', '#5A76A5'],
                legend: {
                  type: 'scroll',
                  orient: 'vertical',
                  textStyle: {
                    color: '#fff'
                  },
                  top: '5%',
                  right: '10%'
                },
                series: [
                  {
                    name: '科室医生手术占比',
                    type: 'pie',
                    center: ['30%', '50%'],
                    radius: ['60%', '80%'],
                    avoidLabelOverlap: false,
                    label: {
                      show: false,
                      position: 'center'
                    },
                    emphasis: {
                      label: {
                        show: true,
                        fontSize: '20',
                        fontWeight: 'bold',
                        formatter: '{b}：{c}'
                      }
                    },
                    labelLine: {
                      show: false
                    },
                    data: pieData
                  }
                ]
              }
              myChart.setOption(option)
            } else {
              myChart.showLoading({
                text: '暂无数据',
                fontSize: 18,
                left: 'center',
                color: 'transparent', // loading颜色，设置成透明或白色，不然会显示loading状态
                textColor: '#fff', // 文字颜色
                maskColor: 'rgba(255, 255, 255, 0)' // 背景色
              })
            }
          }
        })
      }
    }
  }
}
</script>
